
<footer class="bg-gray-50">
  <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
    <span class="block h-10 w-32 rounded-lg bg-gray-200"></span>

    <div class="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <div>
        <p class="font-medium">Company</p>

        <nav class="mt-4 flex flex-col space-y-2 text-sm text-gray-500">
          <a class="hover:opacity-75 cursor-pointer" href=""> About </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Meet the Team </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> History </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Careers </a>
        </nav>
      </div>

      <div>
        <p class="font-medium">Services</p>

        <nav class="mt-4 flex flex-col space-y-2 text-sm text-gray-500">
          <a class="hover:opacity-75 cursor-pointer" href=""> 1on1 Coaching </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Company Review </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Accounts Review </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> HR Consulting </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> SEO Optimisation </a>
        </nav>
      </div>

      <div>
        <p class="font-medium">Helpful Links</p>

        <nav class="mt-4 flex flex-col space-y-2 text-sm text-gray-500">
          <a class="hover:opacity-75 cursor-pointer" href=""> Contact </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> FAQs </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Live Chat </a>
        </nav>
      </div>

      <div>
        <p class="font-medium">Legal</p>

        <nav class="mt-4 flex flex-col space-y-2 text-sm text-gray-500">
          <a class="hover:opacity-75 cursor-pointer" href=""> Privacy Policy </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Terms & Conditions </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Returns Policy </a>
          <a class="hover:opacity-75 cursor-pointer" href=""> Accessibility </a>
        </nav>
      </div>
    </div>

    <div
      class="mt-8 border-t border-gray-100 pt-8 sm:flex sm:items-center sm:justify-between"
    >
      <p class="text-xs text-gray-500">© 2022 Company Name</p>

      <strong
        class="inline-flex items-center gap-2 rounded border border-gray-200 p-2 text-sm font-medium"
      >
        <span> Status: </span>

        <span class="h-3 w-3 rounded-full bg-green-600"></span>

        <span class="font-medium text-green-600">
          All systems operational
        </span>
      </strong>
    </div>
  </div>
</footer>
